Подготовка к режимам отображения завтрашнего дня

PWA могут использовать свойство «display_override» для работы со специальными режимами отображения.

Томас Штайнер

Манифест веб-приложения — это файл JSON, который сообщает браузеру о вашем Progressive Web App и о том, как оно должно себя вести при установке на настольном компьютере или мобильном устройстве пользователя. С помощью свойства display вы можете настроить, какой пользовательский интерфейс браузера будет отображаться при запуске вашего приложения. Например, вы можете скрыть адресную строку и Chrome браузера. Игры можно даже заставить запускаться в полноэкранном режиме. В качестве краткого обзора ниже приведены режимы отображения, которые были указаны на момент написания этой статьи.

Свойство Использовать
fullscreen Открывает веб-приложение без пользовательского интерфейса браузера и занимает всю доступную область экрана.
standalone Открывает веб-приложение, чтобы оно выглядело и работало как отдельное приложение. Приложение работает в своем собственном окне, отдельно от браузера, и скрывает стандартные элементы пользовательского интерфейса браузера, такие как строка URL.
minimal-ui Этот режим похож на standalone , но предоставляет пользователю минимальный набор элементов пользовательского интерфейса для управления навигацией (например, «Назад» и «Перезагрузка»).
browser Стандартный браузерный интерфейс.

Эти режимы отображения следуют четко определенной цепочке отката ( "fullscreen" → "standalone" → "minimal-ui" → "browser" ). Если браузер не поддерживает заданный режим, он возвращается к следующему режиму отображения в цепочке.

Недостатки свойства display

Проблема с этим жестко запрограммированным подходом к резервной цепочке состоит из трех частей:

  • Разработчик не может запросить "minimal-ui" не будучи вынужденным вернуться в режим отображения "browser" в случае, если "minimal-ui" не поддерживается данным браузером.
  • Разработчики не имеют возможности учитывать различия между браузерами, например, включает или исключает браузер кнопку «Назад» в окне для "standalone" режима.
  • Текущее поведение делает невозможным введение новых режимов отображения с сохранением обратной совместимости, поскольку такие исследования, как режим вкладок приложения, не имеют естественного места в цепочке отката.

Свойство display_override

Эти проблемы решаются свойством display_override , которое браузер рассматривает до свойства display . Его значение представляет собой последовательность строк, которые считаются упорядоченными, и применяется первый поддерживаемый режим отображения. Если ни один из них не поддерживается, браузер возвращается к оценке поля display .

В приведенном ниже примере цепочка отката режима отображения будет выглядеть следующим образом. (Подробности "window-controls-overlay" выходят за рамки этой статьи.)

  1. "window-controls-overlay" (Сначала посмотрите на display_override .)
  2. "minimal-ui"
  3. "standalone" (Когда display_override исчерпан, оценить display .)
  4. "minimal-ui" (Наконец, используйте резервную цепочку display .)
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

Для сохранения обратной совместимости любой будущий режим отображения будет приемлем только как значение display_override , но не display . Браузеры, которые не поддерживают display_override возвращаются к свойству display и игнорируют display_override как неизвестное свойство манифеста веб-приложения.

Благодарности

Свойство display_override было формализовано Дэниелом Мерфи .